<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>simple</title>
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <script src="./js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="./css/bs-slide.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    </link>
</head>

<body>
    <!-- 栅格布局 -->
    <!-- <div class="row" style="border: solid 2px red ; width: 50%;">
        <div class="col-2 offset-1" style="background-color: beige;">
            x</div>
        <div class="col-5 offset-1" style="background-color: seagreen;">
            y</div>
    </div> -->

    <form style="border: solid 2px red; width: 800px;margin-left: 200px;">
        <div class="row" style="border:solid 2px yellow">
            <div class="col-2 offset-1">
                <label for="reason">请假原因</label>
            </div>
            <div class="col-5 offset-1">
                <input class="form-control" id="reason" />
            </div>
        </div>
        <div class="row" style="border:solid 2px yellow">
            <div class="col-2 offset-1">
                <label for="leaveType">请假类型</label>
            </div>
            <div class="col-5 offset-1">
                <select class="form-select" id="leaveType">
                    <option>病假</option>
                    <option>年假</option>
                </select>
            </div>
        </div>
        <div class="row" style="border:solid 2px yellow ;margin-top: 60px;">
            <div class="col-2 offset-10">
                <button class="btn btn-success">submit</button>
            </div>
        </div>

    </form>
    <script>

        //  查询node 读写属性 绑定事件
        function submitForm(e) {
            e.preventDefault();
            let reason = document.querySelector("#reason");
            let leaveType = document.querySelector("#leaveType");
            console.log(reason.value, leaveType.value);
            // name=zhangsan&age=10&xx=yy form格式的字符串
            // {"name":"zhangsan","age":10} json格式的字符串
            let content = `leaveReason=${reason.value}
            &leaveType=${leaveType.value}&applier=张三`
            console.log("将要发送form-url格式数据", content);
            let body = {
                leaveReason: reason.value,
                leaveType: leaveType.value,
                applier: "zhangsan"
            }
            console.log(JSON.stringify(body))

        }
        let s = document.querySelector("form button.btn-success");
        console.log(s);
        s.addEventListener("click", submitForm)
// ------------------------------------------

        // s.addEventListener("click",(e)=>{
        //     e.preventDefault();
        //     let reason = document.querySelector("#reason");
        //     let leaveType = document.querySelector("#leaveType");
        //     console.log(reason.value,leaveType.value);
        // })



    </script>
</body>

</html>